<template>
    <div class="campus-permission">
        <nav-header></nav-header>
        <el-tabs v-model="activeName" type="card" @tab-click="changeTab">
				<template v-for="(val, inx) in roleTypeData">
				    <el-tab-pane :label="val.name" :key="inx" :name="'tab-'+inx">
                        <div class="title">可查阅权限：</div>
                        <div v-loading="loading.status" :element-loading-text="loading.txt">
                            <template v-for="(item, index) in infoData">
                                <div :key="index">
                                    <div class="partition-btn">
                                        <el-checkbox  
                                            v-model="item.selected" 
                                            @change="selectNodeChange($event, item.id, index)"
                                            :disabled="item.children.length < 1">{{item.name}}</el-checkbox>
                                    </div>
                                    <el-row class="content-setting">
                                        <el-col>
                                            <el-checkbox v-for="(item2, index2) in item.children" v-model="item2.selected" 
                                            @change="selectNodeChange($event, item2.id, index, index2)" 
                                            :key="item2.id">{{item.name + ' ——> ' +item2.name}}</el-checkbox>
                                        </el-col>
                                    </el-row>
                                </div>
                            </template>
                        </div>
                        <div style="padding-top: 50px">		
                            <el-button type="primary" plain @click="getSelectNode()">重置</el-button>
                            <el-button type="primary" @click="saveRoleData()">提交</el-button>			
                        </div>
                    </el-tab-pane>
            </template>
        </el-tabs>
    </div>
</template>
<script>
export default {
    data() {
        return {
            loading:{
                status: false,
                txt: '获取数据...',
            },
            activeName: 'tab-0',
            activeIndex: 0,
            role_id: 1,
            nodeIds:[],
            roleTypeData: [],
            infoData: [],
        }
    },
    created() {
        this.getRole();
        this.getList();
    },
    methods: {        
        getRole(){  // 获取权限角色列表
            this.loading.status = true;

            let success = ( data => {
                this.loading.status = false;
                // if(this.$store.state.platformInformation){
				// 	data.data.forEach(item =>{
                    // 超级管理员 2  后台管理员 3  教研人员 8
                //     if(item.base_id == 2 || item.base_id == 3 || item.base_id == 8){
                //             this.roleTypeData.push(item)
                //         }
                //     })
				// }else if(!this.$store.state.platformInformation){
				// 	data.data.forEach(item =>{
                //     if(item.base_id == 2 || item.base_id == 3 || item.base_id === 4 || item.base_id === 5 || item.base_id === 6){
                //             this.roleTypeData.push(item)
                //         }
                //     })
				// }else{
                    this.roleTypeData = data.data;
				// }
                if( this.roleTypeData.length > 0 ){
                    this.role_id = this.roleTypeData[0].id;
                    this.getSelectNode();
                }
            });

            let fail = ( data => {
                this.loading.status = false;
                this.$message.error(data.msg);    
            });
                                            // is_have_me:1
            this.$ajax.get('api/role/role', {params:{}, func: {success: success, fail: fail}});        
        },
        getSelectNode(){
            let success = ( data => {
                this.nodeIds = deep_clone(data.data);

                this.infoData.forEach( item => {
                    item.selected = false;

                    if (item.children) {
                        item.children.forEach(res => {
                            res.selected = false;
                        })
                    }
                })

                this.nodeIds.forEach( item => {
                    this.infoData.forEach( val => {
                        if (val.id === item) {
                            val.selected = true;
                        }

                        if (val.children) {
                            val.children.forEach( res => {
                                if (res.id === item) {
                                    res.selected = true;
                                }
                            })
                        }
                    })
                })

                this.$forceUpdate(); //强制渲染
            });

            let fail = ( data => {
                this.$message.error(data.msg);
            });

            this.$ajax.get('api/school/inspection_auth', {params: {role_id: this.role_id}, func: {success: success, fail: fail}});
        },
        getList() {
            this.loading.status = true;

            let success = ( data => {
                this.loading.status = false;
                this.infoData = deep_clone(data.data);
            });

            let fail = (data => {
                this.loading.status = false;
                this.$message.error(data.msg);
            });

            this.$ajax.get('api/school/inspection_data', {params: {}, func: {success: success, fail: fail}})
        },
        selectNodeChange(selected, nodeid, index1, index2) {
            if (index2 === undefined) { // 点击一级列表
                if (selected) {
                    if(!this.nodeIds.includes(nodeid)){
                        this.nodeIds.push(nodeid);
                    }

                    this.infoData[index1].children.forEach( item => {
                        if(!this.nodeIds.includes(item.id)){
                            this.nodeIds.push(item.id);
                            item.selected = true;
                        }
                    })
                } else {
                    if(this.nodeIds.includes(nodeid)){
                        this.nodeIds.splice(this.nodeIds.indexOf(nodeid), 1);
                    }

                    this.infoData[index1].children.forEach( item => {
                        if(this.nodeIds.includes(item.id)){
                            this.nodeIds.splice(this.nodeIds.indexOf(item.id), 1);
                            item.selected = false;
                        }
                    })
                }
            } else {
                if (selected) {
                    if(!this.nodeIds.includes(nodeid)){
                        this.nodeIds.push(nodeid);
                    }

                    if(!this.nodeIds.includes(this.infoData[index1].id)){
                        this.nodeIds.push(this.infoData[index1].id);
                    }
                    this.infoData[index1].selected = true;
                } else {
                    if(this.nodeIds.includes(nodeid)){
                        this.nodeIds.splice(this.nodeIds.indexOf(nodeid), 1);
                    }

                    let flag = true;
                    this.infoData[index1].children.forEach( item => {
                        if(this.nodeIds.includes(item.id)){
                            flag = false;
                        }
                    })

                    if (flag) {
                        this.nodeIds.splice(this.nodeIds.indexOf(this.infoData[index1].id), 1);
                        this.infoData[index1].selected = false;
                    }
                }
            }
            
            this.$forceUpdate(); //强制渲染
        },
        saveRoleData() {
            this.loading.status = true;
            this.loading.txt = '保存数据...';

            let success = ( data => {
                this.loading.status = false
                this.$message.success(data.msg);
            });

            let fail = ( data => {
                this.loading.status = false
                this.$message.error(data.msg)
            })

            let param = {
                data: [...new Set(this.nodeIds)],
                role_id: this.role_id,
            }

            this.$ajax.post('api/school/inspection_auth', param, {func: {success: success, fail: fail}})
        },
        changeTab(tab, event) {
            console.log(tab, event)
            let inx = parseInt(tab.index);

            if( inx !== this.activeIndex ){
                this.activeIndex = inx;
                this.role_id = this.roleTypeData[inx].id;
                this.nodeIds = [];
                this.getSelectNode();
            }
        },
    },
}
</script>
<style lang="scss">
    .campus-permission {
        .el-tabs__nav-wrap {
            width: 80%;
        }

        .el-checkbox {
            margin-left: 10px;
            padding-right: 30px;
            margin-bottom: 10px;
        }

        .partition-btn {
            display: inline-block;
            margin-top: 15px;
            margin-bottom: 15px;
            width: 150px;
            background-color: #F2F2F2;

            .el-checkbox {
                display: flex;
                align-items: center;
                margin-left: 0;                
                margin-bottom: 0;
                padding-top: 8px;
                padding-left: 8px;
                padding-bottom: 8px;
                
                >span:last-child {
                    display: inline-block;
                    word-break: break-all;
                    word-wrap: break-word;
                    white-space: pre-wrap;
                }
            }
        }

        .title {
            margin-top: 10px;
            padding-left: 10px;
            border-left: 6px solid  #348EFC;
        }
    }
</style>
